<template>
  <div class="body">
    <transition-group name="animate__animated animate__bounce" :appear="true" enter-active-class="animate__fadeIn"
                      leave-active-class="animate__fadeOut">
      <div key="1" class="login-box" v-show="showLogin">
        <!--            标题-->
        <h1 class="title">❤️LoveHome❤️</h1>
        <!--            作者-->
        <h3 class="address">--by LuXunI</h3>
        <!--            用户输入框-->
        <div class="input-box">
          <div class="input-username">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yonghuming"></use>
            </svg>
            <el-input placeholder="请输入账号" v-model="loginForm.username"></el-input>
          </div>
          <div class="input-password">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-mima"></use>
            </svg>
            <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
          </div>
        
        </div>
        <div class="login-btn-box">
          <el-button @click="login(loginForm)" class="login-btn">登陆</el-button>
        </div>
        <div class="sign-tips">
          还没有账号？
          <div class="sign-btn" @click="signPage">点击注册</div>
        </div>
      </div>
    </transition-group>
    <!--        注册界面-->
    <transition-group name="animate__animated animate__bounce" :appear="true" enter-active-class="animate__fadeIn"
                      leave-active-class="animate__fadeOut">
      <div key="2" class="sign-box" v-show="showSign">
        <!--            标题-->
        <h1 class="sign-title">欢迎加入我们</h1>
        <!--            作者-->
        <h3 class="address">--by LuXunI</h3>
        <!--            用户输入框-->
        <div class="sign-input-box">
          <div class="sign-username">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yonghuming"></use>
            </svg>
            <el-input placeholder="请输入您想要的账号" v-model="signForm.username"></el-input>
          </div>
          <div class="sign-password">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-mima"></use>
            </svg>
            <el-input placeholder="请输入您自己的密码" v-model="signForm.password" show-password></el-input>
          </div>
          <div class="sign-password-confirm">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-mima1"></use>
            </svg>
            <el-input placeholder="请确认您自己的密码" v-model="passwordConfirm" show-password></el-input>
          </div>
          <div class="sign-mobile">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dianhua"></use>
            </svg>
            <el-input placeholder="请输入您的电话号码" v-model="signForm.mobile"></el-input>
          </div>
          <div class="sign-email">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-youxiang"></use>
            </svg>
            <el-input placeholder="请输入您的邮箱" v-model="signForm.email"></el-input>
          </div>
        </div>
        <div class="sign-btn-box">
          <el-button class="sign-btn" @click="sign">我要注册</el-button>
        </div>
        <div class="login-tips">
          您已经有账号了嘛？
          <div class="login-btn" @click="loginPage">快点我登陆</div>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import '@/assets/font/login/iconfontLAS'//引入图标文件

export default {
  name: "LoginInterface",
  data() {
    return {
      show: true,
      loginForm: {
        username: 'luxuni',//账号
        password: '123456789',//密码
      },
      showLogin: true,//显示登陆界面？
      showSign: false,//显示注册页面？
      signForm: {
        username: '',
        password: '',
        mobile: '',
        email: '',
      },
      passwordConfirm: '',
      //用户注册后马上登陆
      signNowFrom: {
        username: '',
        password: '',
      },
    }
  },
  created() {
    this.removeToken()//当用户回到登陆界面时，删除用户的令牌
  },
  methods: {
    async login(loginForm) {//获取登陆数据
      const {data: res} = await this.$http.post('login', loginForm)
      const {data: user} = await this.$http.get('getname', {
        params: {
          name: this.loginForm.username
        }
      })
      this.$store.state["username/name"] = user.data.name
      sessionStorage.setItem("username", `${this.$store.state["username/name"]}`);
      if (res.meta.status !== 200) {//用户登陆失败
        return this.$messag.error('对不起！您输入的账号或者密码有误！请重新输入！')//弹出登陆失败提示框
      }
      this.$messag.success('恭喜您！登陆成功！')//用户登陆成功
      window.sessionStorage.setItem('token', res.token)//暂时把token保存到浏览器中
      await this.$router.push('/mi')//登陆成功通过编程式导航完成页面跳转到home
    },
    removeToken() {//当用户回到登陆界面时，删除用户的令牌
      window.sessionStorage.removeItem('token')
    },
    //注册按钮
    signPage() {
      this.showSignFunction()//让注册页面展示
    },
    loginPage() {
      this.showLoginFunction()//让登陆页面显示
    },
    //控制是登陆页面展示还是注册页面展示
    showLoginFunction() {
      this.showSign = false
      setTimeout(() => {
        this.showLogin = true
      }, 900)
    },
    showSignFunction() {
      this.showLogin = false
      setTimeout(() => {
        this.showSign = true
      }, 900)
    },
    //当用户点击注册按钮时
    async sign() {
      //验证邮箱的正则表达式
      let regEmail = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/
      //验证电话号码的正则表达式
      let regMobile = /^1[3|4|5|7|8]\d{9}$/
      if (this.signForm.password !== this.passwordConfirm) {//当用户两次输入的密码不相同时
        //清空用户的密码输入
        this.signForm.password = ''
        this.passwordConfirm = ''
        return this.$message.error('您两次输入的密码不相同')//提示用户两次输入的密码不相同
      }
      if (regMobile.test(this.signForm.mobile) !== true) {
        this.signForm.mobile = ''
        return this.$message.error('您输入的电话号码不合法，请重新输入')
      }
      if (regEmail.test(this.signForm.email) !== true) {
        this.signForm.email = ''
        return this.$message.error('您输入的邮箱不和法，请重新输入')
      }
      if (this.signForm.password.length < 9) {
        console.log(this.signForm.password)
        //清空用户的密码输入
        this.signForm.password = ''
        this.passwordConfirm = ''
        return this.$message.error('您输入的密码长度不足9位，请重新输入')
      }
      const {data: res} = await this.$http.post('newusers', this.signForm)
      if (res.meta.status === 201) {
        this.signForm.mobile = ''
        return this.$message.error('对不起，因为此电话号码已经注册过了，您不能重复注册')
      }
      //为用户注册之后如果想马上登陆做预准备
      this.signNowFrom.username = this.signForm.username
      this.signNowFrom.password = this.signForm.password
      //清空用户输入
      this.signForm.username = ''
      this.signForm.password = ''
      this.passwordConfirm = ''
      this.signForm.mobile = ''
      this.signForm.email = ''
      this.$message.success('恭喜您！您注册成功了！')
      this.askLogInNow()
    },
    askLogInNow() {
      this.$confirm('请问您要现在登陆嘛', '恭喜您注册成功呢！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '欢迎进入LoveHome--by luxuni'
        });
        this.login(this.signNowFrom)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '呜呜呜，期待您之后的登陆呢'
        });
        this.showLoginFunction()
      });
    }
  }
}
</script>

<style lang="less" scoped>
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background-image: url("../assets/image/imgLogin/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.login-box, .sign-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 600px;
  height: 400px;
  background-color: rgba(0, 0, 0, .5);
  border: 10px;
  padding: 20px 50px;
  border-radius: 20px;
}

//登陆界面样式
.login-box .title, .sign-box .sign-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.50);
  font-size: 30px;
}

.login-box .address, .sign-box .address {
  display: flex;
  justify-content: end;
  width: 400px;
}

.login-box .input-box {
  display: flex;
  width: 300px;
  height: 120px;
  flex-wrap: wrap;
  
  .icon {
    color: #a6c0fe;
    position: absolute;
  }
  
  .input-username {
    display: flex;
    align-items: center;
    width: 300px;
    
    .el-input {
      margin-left: 50px;
    }
  }
  
  .input-password {
    display: flex;
    align-items: center;
    width: 300px;
    
    .el-input {
      margin-left: 50px;
    }
  }
}


.login-box {
  .login-btn-box {
    display: flex;
    width: 500px;
    justify-content: center;
    
    /deep/ .login-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 145px;
      height: 50px;
      color: #fff;
      background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
      border-radius: 25px;
      cursor: pointer;
    }
    
    /deep/ .el-input__inner {
      background-color: #ffffff00;
      color: white;
    }
    
  }
}

.login-box .sign-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  color: #ff8198;
  
  /deep/ .sign-btn {
    color: #a6c0fe;
    background-color: #ffffff00;
    cursor: pointer;
  }
}

//注册界面样式
.sign-box .sign-title {
  color: #ff8198;
}

.sign-box {
  height: 700px;
  
  .sign-btn-box {
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /deep/ .sign-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 145px;
      height: 50px;
      color: #fff;
      background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
      border-radius: 25px;
      cursor: pointer;
    }
  }
  
  .login-tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 500px;
    color: #ff8198;
    
    .login-btn {
      color: #a6c0fe;
      background-color: #ffffff00;
      cursor: pointer;
    }
  }
  
  .sign-input-box {
    display: flex;
    width: 300px;
    height: 450px;
    flex-wrap: wrap;
    
    .icon {
      color: #a6c0fe;
      position: absolute;
    }
    
    .sign-username, .sign-password, .sign-password-confirm, .sign-mobile, .sign-email {
      display: flex;
      align-items: center;
      width: 300px;
      
      .el-input {
        margin-left: 50px;
      }
    }
  }
}
</style>
